<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="avatar-select-dialog" v-if="dialogVisible">
                <div class="avatar-select-dialog__mask" @click="onClose"></div>
                <div class="avatar-select-dialog__content">
                    <div class="avatar-select-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="avatar-select-dialog__title">请选择头像</div>
                    <div class="avatar-select-list">
                        <div
                            class="avatar-select-item"
                            v-for="(item, index) in list"
                            :key="item.id"
                            @click="onActivated(index)"
                            :class="{ active: index === activeIndex }"
                        >
                            <img :src="item.avatar_image_url" />
                        </div>
                    </div>
                    <div class="avatar-select-btn-1" @click="onUpdate">
                        立即更改
                    </div>
                    <div class="avatar-select-btn-2" @click="emit('diy')">
                        自定义上传
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { useContent } from ".";
const emit = defineEmits(["diy"]);

const {
    dialogVisible,
    activeIndex,
    list,
    onUpdate,
    onClose,
    onActivated,
    GetList,
} = useContent();

defineExpose({
    show() {
        dialogVisible.value = true;
        GetList();
    },
});
</script>
<style lang="scss" scoped>
.avatar-select-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 350px;
        height: 380px;
        background-color: #fff;
        transform: translate(-50%, -50%) scale(0.8);
        border-radius: 10px;
    }

    &__close {
        position: absolute;
        top: 0px;
        right: -50px;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }

    &__title {
        padding-top: 30px;
        font-size: 20px;
        color: #000;
        font-weight: bold;
        text-align: center;
    }

    .avatar-select-list {
        display: flex;
        flex-wrap: wrap;
        margin: 27px 50px 0;

        .avatar-select-item {
            width: 60px;
            height: 60px;
            margin-right: 33px;
            margin-bottom: 20px;

            &:nth-of-type(3n) {
                margin-right: 0;
            }

            img {
                width: 100%;
                height: 100%;
            }

            &.active {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 60px;
                    height: 60px;
                    background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/dialog/avatar-select/border.png");
                }
            }
        }
    }

    .avatar-select-btn-1,
    .avatar-select-btn-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 250px;
        height: 40px;
        font-size: 16px;
        color: #fff;
        border-radius: 4px;
        margin: 0 auto;
        user-select: none;
        cursor: pointer;
    }

    .avatar-select-btn-1 {
        background-color: #ff7432;
        margin-top: 16px;
    }

    .avatar-select-btn-2 {
        background-color: #5085fb;
        margin-top: 20px;
    }
}
</style>
